import {uEditDevStandRange} from '@/api/standard'
import {splitStandard, joinStandard} from '@/libs/standardUtils'
import {FormInstance} from 'ant-design-vue'
import {PropType} from 'vue'
import {ChangeVisible} from '../modal'
import {StandardSelect} from '../select/stanard'
import {CnBoldSpan, CnNormalP, CnNormalSpan} from '../text'
import {message} from '@/libs/global/antDesignVue'

const StandardModalForm = defineComponent({
  props: {
    changeVisible: Function as PropType<ChangeVisible>,
    devStandRange: {
      type: Object as PropType<Standard.DevStandRange>
    }
  },
  emits: {
    finish: (formRef?: FormInstance) => true,
    reset: (formRef?: FormInstance) => true
  },
  setup(props, {emit, slots}) {
    const state = reactive<{
      standard: {
        devSRId: number
        devId: number
        paramCode: string
        paramName: string
        paramUnit: string
        standRange: string
        devSRDesc: null
      } | null
      standardUnit: StandardUnit
      standardValue: string[]
    }>({
      standard: null,
      standardUnit: undefined,
      standardValue: ['', '']
    })

    watch(
      () => props.devStandRange,
      n => {
        if (!n) {
          state.standard = null
          return
        }
        state.standard = n
        const split = splitStandard(n.standRange)
        state.standardUnit = split.unit
        state.standardValue = split.value || ['', '']
      },
      {immediate: true, deep: true}
    )

    function handleConfirmClick() {
      const devSRId = state.standard?.devSRId
      if (!devSRId) return
      const standRange = joinStandard({
        standardUnit: state.standardUnit,
        standardValue: state.standardValue
      })
      if (!standRange) return

      uEditDevStandRange({devSRId, standRange: standRange}).catch(err => {})

      props.changeVisible && props.changeVisible(false)
      emit('finish')
    }

    function handleCancelClick() {
      props.changeVisible && props.changeVisible(false)
    }

    onMounted(() => {})

    return () => (
      <div class='relative'>
        <table class='table-auto mb-20'>
          <tbody>
            <tr class='h-56 flex items-center'>
              {/* 参数名称 */}
              <th class='pl-26'>
                <CnBoldSpan class='min-w-20 mr-24'>{state.standard?.paramName}</CnBoldSpan>
              </th>
              {/* 合格标准范围下拉选择 */}
              <th>
                <StandardSelect
                  class='mr-24'
                  v-model={[state.standardUnit, 'standardUnit']}
                ></StandardSelect>
              </th>
              {/* 合格范围为两者之间时要输入两个值，其余只需要属于一个值 */}
              <th class='flex items-center'>
                {state.standardUnit === '-' ? (
                  [
                    <a-input
                      allowClear
                      type='number'
                      v-model={[state.standardValue[0], 'value', ['number', 'trim']]}
                      class='w-100 mr-10'
                    ></a-input>,
                    <a-input
                      allowClear
                      type='number'
                      v-model={[state.standardValue[1], 'value', ['number', 'trim']]}
                      class='w-100 mr-10'
                    ></a-input>
                  ]
                ) : (
                  <a-input
                    allowClear
                    type='number'
                    v-model={[state.standardValue[0], 'value', ['number', 'trim']]}
                    class='w-200 mr-10'
                  ></a-input>
                )}
              </th>
              {/* 参数单位 */}
              <th>
                <CnNormalSpan class='w-40 h-full justify-start pt-13'>
                  {props.devStandRange?.paramUnit}
                </CnNormalSpan>
              </th>
            </tr>
          </tbody>
        </table>

        <div class='ant-modal-footer'>
          <a-button class='ant-btn' onClick={handleCancelClick}>
            取消
          </a-button>
          <a-popconfirm
            title={
              <div class=''>
                <CnNormalP class='text-12 text-text'>是否确认修改此标准?</CnNormalP>
                <CnNormalP class='text-text mt-12'>
                  修改后平台将会根据此标准（
                  {joinStandard({
                    standardUnit: state.standardUnit,
                    standardValue: state.standardValue
                  })}
                  ）对该设备监测的水质数据进行分析!
                </CnNormalP>
              </div>
            }
            ok-text='确认'
            cancel-text='取消'
            onConfirm={handleConfirmClick}
            onCancel={() => {}}
          >
            <a-button class='ant-btn' type='primary'>
              确定
            </a-button>
          </a-popconfirm>
        </div>
      </div>
    )
  }
})

export default StandardModalForm
